<template>
  <div class="container">
    <el-card>
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="22">
          <span>学科名称</span>
          <el-input
            v-model="queryInfo.subjectName"
            placeholder="请输入内容"
            class="inputSearch"
          ></el-input>

          <el-button @click="closeInput">清除</el-button>
          <el-button type="primary" @click="loadSubjectList()"
            >搜索</el-button
          ></el-col
        >

        <el-col :span="2">
          <el-button
            type="success"
            icon="el-icon-edit"
            class="addbtn"
            @click="addFormdialogVisible = true"
            >新增学科</el-button
          >
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-alert
        :title="`数据一共${totalCount}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="subjectList" border style="width: 100%" stripe>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期" width="180px">
          <template v-slot="scope">
            {{ scope.row.addDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template v-slot="scope">
            {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template v-slot="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="
                $router.push({
                  path: 'directorys',
                  query: {
                    id: scope.row.id,
                    username: scope.row.username,
                    subjectName: scope.row.subjectName
                  }
                })
              "
              >学科分类</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              @click="
                $router.push({
                  path: 'tags'
                })
              "
            >
              <!-- query: {
                    id: scope.row.id,
                    username: scope.row.username,
                    subjectName: scope.row.subjectName
                  } -->
              学科标签</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              @click="editSubject(scope.row)"
              >修改</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              @click="deleteSubject(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 40]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, sizes,jumper"
        :total="totalCount"
        background
        class="page"
      >
      </el-pagination>
    </el-card>
    <!-- 添加学科 -->
    <el-dialog
      :title="titles"
      :visible.sync="addFormdialogVisible"
      width="30%"
      @close="closeAddDialog"
    >
      <el-form
        :model="SubjectForm"
        :rules="SubjectFormRules"
        ref="SubjectForm"
        label-width="100px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="SubjectForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="switchChange"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubjectFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, detail, update } from '../../api/hmmm/subjects'
// import subjectAdd from '../components/subjects-add.vue'
export default {
  name: 'Subjects',
  components: {
    // subjectAdd
  },
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectName: null
      },
      // 学科列表
      subjectList: [],
      // 总数量
      totalCount: 0,
      // dialogVisible: false,
      addFormdialogVisible: false,
      SubjectFormRules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      },
      SubjectForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      value: true,
      titles: '新增学科'
    }
  },
  created() {
    this.loadSubjectList()
  },
  methods: {
    async loadSubjectList() {
      const data = await list(this.queryInfo)
      this.subjectList = data.data.items
      this.totalCount = data.data.counts
      console.log(data)
      if (data.status !== 200) {
        this.$message('获取学科列表失败')
      }
    },
    closeAddDialog() {
      this.$refs.SubjectForm.resetFields()
      this.titles = '新增学科'
      this.value = true
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.loadSubjectList()
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.page = val
      this.loadSubjectList()
    },
    closeInput() {
      this.queryInfo.subjectName = ''
      this.loadSubjectList()
    },
    async deleteSubject(objSub) {
      const comfirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // console.log(comfirmResult)
      if (comfirmResult !== 'confirm') {
        return this.$message.info('已取消了删除')
      }
      const data = await remove(objSub)
      // console.log(data)
      if (data.status !== 200) {
        this.$message.error('删除失败')
      }
      if (this.totalCount % this.queryInfo.pagesize === 1) {
        this.queryInfo.page--
      }
      this.loadSubjectList()
      this.$message.success('删除成功')
    },
    switchChange() {
      if (this.value === true) {
        this.SubjectForm.isFrontDisplay = 1
      } else {
        this.SubjectForm.isFrontDisplay = 0
      }
    },
    addSubjectFn() {
      // console.log(this.SubjectForm)
      this.$refs.SubjectForm.validate(async (valid) => {
        // console.log(valid) // true false
        if (!valid) return

        if (this.titles === '新增学科') {
          const data = await add(this.SubjectForm)
          // console.log(data)
          if (data.status !== 200) {
            return this.$message.error('添加学科失败')
          }
          this.$message.success('添加学科成功')
        } else {
          const data = await update(this.SubjectForm)
          console.log(data)
          if (data.status !== 200) {
            return this.$message.error('修改学科失败')
          }
          this.$message.success('修改学科成功')
          this.titles = '新增学科'
          this.value = true
        }

        this.loadSubjectList()
        this.addFormdialogVisible = false
      })
    },
    async editSubject(obj) {
      this.titles = '编辑学科'

      // 获取当前行的信息
      const { data } = await detail(obj)
      console.log(data)
      this.SubjectForm = data
      data.isFrontDisplay === 1 ? (this.value = true) : (this.value = false)
      this.addFormdialogVisible = true
    }
  }
}
</script>

<style scoped lang="less">
.inputSearch {
  width: 250px;
  margin-right: 20px;
  margin-left: 10px;
}

.addbtn {
  padding: 10px;
}
.el-card {
  margin: 10px 10px;
  padding: 0 20px;
}
.el-alert {
  margin: 15px 0;
}
.el-link {
  margin-right: 10px;
}
.el-pagination {
  margin: 15px 0;
  float: right;
}
</style>
